<template>
  <div class="wrapper">
    <div class="title">耗材使用</div>
    <div class="content" v-for="(item, index) in charts" :key="index">
      <v-chart :options="item"></v-chart>
    </div>
    <!-- <v-chart :options="chartOptions"></v-chart> -->
  </div>
</template>

<script>
import axios from '@/utils/request'
export default {
  components: {},
  props: {
    totalType: String
  },
  data () {
    return {
      res: [],
      chartOptions: {}
    }
  },
  computed: {
    charts () {
      const _charts = []
      if (this.res && this.res.length) {
        this.res.map((item, index) => {
          const xData = []
          const yData = []
          // const _maxVal = 0
          item.items.map((v, i) => {
            if (Math.floor(v.qty) > 1000) {
              xData.push(Math.floor(v.qty) / 1000)
              yData.push(v.manufacturerName)
            } else {
              xData.push(v.qty)
              yData.push(v.manufacturerName)
            }
          })
          _charts[index] = {
            title: {
              text: item.platformMaterial,
              x: '50%',
              y: '12%',
              textStyle: {
                fontSize: 12,
                color: '#767'
              }
            },
            tooltip: {
              trigger: 'axis',
              formatter: (v) => {
                return `${v[0].name} ${v[0].data} 次`
              }
            },
            grid: {
              top: '80px',
              left: '13%', // `${(index + 1) * 13}%`, // '13%',
              right: '4%',
              bottom: '15%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              splitNumber: 5,
              min: 0,
              max: 700,
              data: xData
            },
            yAxis: {
              type: 'category',
              axisLine: { onZero: false },
              axisLabel: {
                formatter: '{value}'
              },
              boundaryGap: true,
              data: yData // ['费森', '金宝', '贝朗', '尼普洛']
            },
            series: [
              {
                name: '',
                type: 'line',
                symbolSize: 5,
                symbol: 'circle',
                smooth: true,
                lineStyle: {
                  width: 2,
                  shadowColor: 'rgba(0,0,0,0.3)',
                  shadowBlur: 10,
                  shadowOffsetY: 8
                },
                data: xData// [15, 44, 58, 79]
              }
            ]
          }
        })
      }
      return _charts
    }
  },
  methods: {
    initCharts () {
      let url = '/api/hq/dashboard/all/material/total/sumqty'
      if (this.totalType === 'month') url += '?totalType=0'
      else if (this.totalType === 'quarterly') url += '?totalType=1'
      else url += '?totalType=2'
      axios.get(url)
        .then(res => {
          this.res = res
        })
        .catch(err => {
          console.log(err)
        })
    }
  },
  mounted () {
    this.initCharts()
  }
}
</script>
<style lang="scss" scoped>
.wrapper {
  display: flex;
  box-sizing: border-box;
  .title {
    width: 80px;
    padding-top: 30px;
    font-size: 17px;
    font-weight: 600;
    color: #666;
  }
  .content {
    flex: 1;
    height: 240px;
  }
}
</style>
